<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css" media="all"/>
</head>
<body>

<script id="toolbar1" type="text/html">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-add-1"></i>新增顶级
    </button>
    <button type="button" lay-event="del" class="layui-btn layui-btn-sm layui-bg-red"><i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script id="toolbar2" type="text/html">
    <button type="button" lay-event="add" class="layui-btn layui-btn-xs layui-btn-normal">增下级</button>
    <button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>
    {{#   if(d.children==null || d.children.length == 0){     }}
    <button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>
    {{#   }     }}
</script>
<script id="toolbar3" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="padding: 10px 40px" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id"/>
                    <input type="hidden" id="parent_id" name="parent_id"/>
                    <input type="text" name="name" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="href" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sequence" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button id="saveBtn" type="button" class="layui-btn" lay-submit lay-filter="demo2">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</script>
<table class="layui-table" id="ID-table-demo-init"></table>
<script src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['treeTable', 'layer','form'], function () {
        let treeTable = layui.treeTable;
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;

        treeTable.render({
            elem: "#ID-table-demo-init",
            cols: [[
                {type: "checkbox"},
                {title: "名称", field: "name", align: "center"},
                {title: "图标", templet:function(d){
                    return "<i class='layui-icon'>"+d.icon+"</i>";
                    }, align: "center"},
                {title: "地址", field: "href", align: "center"},
                {title: "排序", field: "sequence", align: "center"},
                {title: "操作", align: "center", templet: "#toolbar2"}
            ]],
            url: "/menu?o=select",
            toolbar: "#toolbar1",
            tree:{
                view:{
                    showIcon:false
                }
            }
        });

        //绑定表格事件
        treeTable.on("tool", function (obj) {
            if (obj.event === "edit") {
                //请求获取所有信息
                $.get("/menu", {o: "info", id: obj.data.id}, function (u) {
                    //获取成功后再弹出窗口，并回显数据
                    layer.open({
                        title: "编辑菜单",
                        area: ["400px", "400px"],
                        type: 1,
                        content: $("#toolbar3").html()
                    });
                    form.val("form1", u);
                    //给保存按钮绑定事件
                    $("#saveBtn").on("click", function () {
                        //1.收集表单中录入的所有数据
                        let data = form.val("form1");
                        data.o = "save";
                        //2.发请求，把数据传给servlet
                        $.post("/menu", data, function () {
                            //3.请求成功之后
                            layer.closeAll();
                            $("#searchBtn").click();
                        });
                    });
                });
            }
            if (obj.event === "del") {
                layer.confirm("您确定要删除这个菜单吗？", function () {
                    $.post("/menu", {o: "delete", id: obj.data.id}, function () {
                        //1.关闭提示窗口
                        layer.closeAll();
                        //2.重新渲染表格
                        $("#searchBtn").click();
                    });
                });
            }
            if(obj.event === "add"){
                layer.open({
                    title: "新增菜单",
                    area: ["400px", "400px"],
                    type: 1,
                    content: $("#toolbar3").html()
                });
                form.render();
                //给保存按钮绑定事件
                $("#saveBtn").on("click", function () {
                    //1.收集表单中录入的所有数据
                    let data = form.val("form1");
                    data.o = "save";
                    //2.发请求，把数据传给servlet
                    $.post("/menu", data, function () {
                        //3.请求成功之后
                        layer.closeAll();
                        $("#searchBtn").click();
                    });
                });
            }
        });

        treeTable.on("toolbar", function (obj) {
            if (obj.event === "add") {
                layer.open({
                    title: "新增菜单",
                    area: ["400px", "400px"],
                    type: 1,
                    content: $("#toolbar3").html()
                });
                form.render();
                //给保存按钮绑定事件
                $("#saveBtn").on("click", function () {
                    //1.收集表单中录入的所有数据
                    let data = form.val("form1");
                    data.o = "save";
                    //2.发请求，把数据传给servlet
                    $.post("/menu", data, function () {
                        //3.请求成功之后
                        layer.closeAll();
                        $("#searchBtn").click();
                    });
                });
            }
        });

    });
</script>
</body>
</html>